<template>
  <div ref="contentDiv">
    <span v-html="htmlContent"></span>

    <hr />
    <span>{{ txt }}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      htmlContent:
        '<a>这是要截取的内容</a>，还有另一个<a>更多要截取的内容</a>12312222222222222',
      txt: ''
    }
  },
  mounted () {
    this.labelHandle()
  },
  methods: {
    labelHandle () {
      const aTags = this.$refs.contentDiv.querySelectorAll('a')
      aTags.forEach((aTag) => {
        // 设置下划线样式（通过设置text-decoration属性）
        aTag.style.textDecoration = 'underline'
        // 设置鼠标移上去变成小手样式（通过设置cursor属性）
        aTag.style.cursor = 'pointer'

        aTag.addEventListener('click', (event) => {
          const aTagValue = event.target.textContent
          console.log(aTagValue)
          this.txt = aTagValue
          this.htmlContent += `<a>AAAAA${Math.random()}AAAA</a>`
        })
      })
    }
  },
  updated () {
    this.labelHandle()
  }
}
</script>
